<template>
    <div class="carousel-container">
        <div class="carousel" :style="carouselStyle">
            <div class="carousel-item" v-for="_new in news" :key="_new.newid">
                <a href=""><img :src="_new.imageName" :alt="_new.title" /></a>
                <div class="carousel-caption">
                        <h3>{{ _new.title }}</h3>
                        <p>{{ _new.content }}</p>
                </div>
            </div>
        </div>
        <div class="carousel-controls">
            <button class="prev" @click="prevSlide">&lt;</button>
            <button class="next" @click="nextSlide">&gt;</button>
        </div>
    </div>
    <br>
    <div class="news-list">
        <div class="news-item" v-for="_new in news2" :key="_new.newid">
            <img class="list" :src="_new.imageName" :alt="_new.title" />
            <div class="news-content">
                <h4>{{ _new.title }}</h4>
                <p>{{ _new.content }}</p>
                <RouterLink to="page1">阅读全文</RouterLink>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios'

// 定义轮播图项
// 定义响应式数据
const news = ref([])
const errorMessage = ref('')

const fetchNews = async () => {
    try {
        const response = await axios.get('http://localhost:3001/getNews')
        news.value = response.data
        errorMessage.value = ''  // 清空错误信息
    } catch (error) {
        console.error('获取数据时发生错误:', error)
        errorMessage.value = '加载数据失败，请稍后再试。'
    }
}
// 当前显示的索引
const currentIndex = ref(0);

// 切换到下一个轮播项
const nextSlide = () => {
    currentIndex.value = (currentIndex.value + 1) % news.value.length;
};

// 切换到上一个轮播项
const prevSlide = () => {
    currentIndex.value = (currentIndex.value - 1 + news.value.length) % news.value.length;
};

// 计算轮播图容器的样式
const carouselStyle = computed(() => {
    return {
        transform: `translateX(-${currentIndex.value * 100}%)`,  // 控制轮播图滑动
        transition: 'transform 1s ease-in-out',  // 设置滑动动画效果
    };
});

// 自动切换功能
onMounted(fetchNews)
onMounted(() => {
    setInterval(nextSlide, 5000); // 每5秒自动切换
});
// 定义响应式数据
const news2 = ref([])
const errorMessage2 = ref('')

const fetchNews2 = async () => {
    try {
        const response = await axios.get('http://localhost:3001/getNews')
        news2.value = response.data
        errorMessage2.value = ''  // 清空错误信息
    } catch (error) {
        console.error('获取数据时发生错误:', error)
        errorMessage2.value = '加载数据失败，请稍后再试。'
    }
}
onMounted(fetchNews2)
</script>

<style scoped>

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    /* 适应新闻列表的宽度 */
    margin: 20px auto;
    overflow: hidden;
}

.carousel {
    display: flex;
}

.carousel-item {
    min-width: 100%;
    position: relative;
}

.carousel-item img {
    width: 100%;
    height: 400px;
    /* 调整高度为适合新闻列表的尺寸 */
    object-fit: cover;
    filter: brightness(70%);
}

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.carousel-caption h3 {
    font-size: 24px;
    font-weight: bold;
}

.carousel-caption p {
    font-size: 16px;
    max-width: 80%;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.carousel-controls button {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 30px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-controls button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.carousel-controls .prev {
    margin-left: 20px;
}

.carousel-controls .next {
    margin-right: 20px;
}

h3:hover {
    color: red;
}

.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px;
}

.news-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
}

.news-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.news-content {
    padding: 15px;
}

.news-content h4 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: bold;
}

.news-content p {
    margin: 0 0 15px;
    font-size: 14px;
    color: #666;
}

.news-content a {
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.news-content a:hover {
    text-decoration: underline;
}

h4:hover {
    color: red;
}

p:hover {
    color: red;
}

.list:hover {
    transform: scale(1.1);
}
</style>